<template>
  <el-container>
    <el-aside width="300px" class="content-left-list">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-guanxiwajue"></i>
          <span class="ps-panel-head-title">子图信息</span>
        </div>

        <div class="ps-panel-body">
          <el-tree :data="labels" node-key="id" default-expand-all :expand-on-click-node="false"
            :props="{ label: 'label_name' }" @node-click="treeNodeClick" :highlight-current="true" ref="visualTree">
            <span class="custom-tree-node" slot-scope="{ data }">
              <div class="tree_row" draggable @dragstart="dragStart" @dragend="nodeDrag(data)">
                <span class="tree_row_name">{{ data.label_name }}</span>
              </div>
            </span>
          </el-tree>
        </div>
      </div>
    </el-aside>
    <el-main v-loading="isloading">
      <!-- <div id="neo4jd3" class="neo4jd3"></div> -->
      <!--左侧属性列表 start-->
      <div class="height-100" style="position: relative;">
        <!--左侧属性列表 end-->
        <!-- G6 start -->
        <G6Subnet class="neo4jd3" ref="g6" @openRelationPop="openRelationPop" @firingResult="firingResult"></G6Subnet>
        <!-- G6 end -->
        <!-- 结果 start -->
        <RightSideResult :left_status="left_status" :longData="longData" ref="changeWindow"></RightSideResult>
        <!-- 结果 end -->
      </div>
      <!--拖拽框 start  -->
      <VueDragResize v-show="isRelation" :parentLimitation="true" :isResizable="false" :x="20" :y="30">
        <transition name="custom-classes-transition" enter-class="animated backInLeft"
          leave-active-class="animated bounceOutLeft">
          <div style="background: #fff; width: 100%; height: 100%" class="relative_block">
            <p style="text-align: center; position: relative">
              <span style="font-size: 16px; font-weight: bold">关系信息</span>
              <i class="el-icon-close" style="
                  position: absolute;
                  right: 5px;
                  top: 5px;
                  font-size: 15px;
                  cursor: pointer;
                " @click="closeRelate"></i>
            </p>
            <div style="width: 100%; height: 80%; overflow: auto" v-loading="isLoadingTree">
              <el-tree :data="RealtionData" node-key="id" default-expand-all :expand-on-click-node="false"
                :props="{ label: 'label_name' }" @node-click="handleNodeClick" :highlight-current="true"
                ref="RelationTree"></el-tree>
            </div>
          </div>
        </transition>
      </VueDragResize>

      <!--拖拽框 end  -->
    </el-main>
  </el-container>
</template>
<script>
  import G6Subnet from "../../G6Common/G6Subnet";
  import RightSideResult from "./components/RightSideResult";
  import $ from "jquery";
  // 引入文件
  import VueDragResize from "vue-drag-resize";

  export default {
    name: "index",
    components: {
      G6Subnet,
      VueDragResize,
      RightSideResult,
    },
    data: function () {
      return {
        labels: [],

        paginations: {
          pageIndex: 1, // 当前位于哪页
          pageSize: 10, // 页显示多少条
          total: 0, // 总数
          layout: "total, prev, pager, next", // 翻页属性
        },

        // 选中的模型Id和labelName
        currModelId: 0,
        currModelLabelName: "",
        //当前模型的属性信息
        currModelProperties: [],

        //当前选中模型的实例列表
        currModelInstances: [],

        //当前选中的实例信息
        currModelInstance: {
          visible: false,
          rules: {
            名称: [{
              required: true,
              message: "名称不能为空"
            }],
            // dataType: [{required: true, message: '数据类型不能为空'}],
            // createDate: [{required: true, message: '创建时间不能为空'}]
          },
          data: {},
        },
        isRelation: false,
        RealtionData: [],

        isloading: false,
        isLoadingTree: false,
        left_status: false,
        isDragDown: false,
        longData: [],
      };
    },
    methods: {
      treeNodeClick(data) {
        this.currModelId = data.id;
        this.currModelLabelName = data.label_name;
        // console.log("nnnnnnnnnnnnnnnnnn", this.currModelLabelName);

        //获取模型属性信息
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/dicLabelProperties?labelId.equals=" +
            this.currModelId +
            "&paged=false",
          method: "get",
          data: {},
          succeed: (res) => {
            console.log(res);
            this.currModelProperties = res;
            // console.log("get properties: ", this.currModelProperties);
          },
        });
      },
      //初始化
      initLabels() {
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/dicLabel/tree",
          method: "get",
          succeed: (res) => {
            console.log(res);
            this.labels = res;
            this.currModelLabelName = res[0].type;
          },
        });
      },
      //拖动节点--开始
      dragStart() {
        this.$refs['g6'].isDragDown = false; //每次拖拽前要初始化
      },
      //拖动节点--结束
      nodeDrag(data) {
        if (this.$refs['g6'].isDragDown) {
          setTimeout(() => {
            this.$refs["g6"].findApointIdNode(data);
          }, 100);
        }
      },
      //关闭关系树框
      closeRelate() {
        this.isRelation = false;
        this.RealtionData = [];
      },
      //打开关系框
      openRelationPop(isWen) {
        this.isRelation = isWen; //关系弹框关闭
        if (isWen) {
          this.isLoadingTree = true;
          this.$store.dispatch("ajax", {
            url: "services/app-zonghe/api/dicLabel/tree?type.equals=5",
            method: "get",
            succeed: (res) => {
              console.log(res);
              this.RealtionData = res;
              this.isLoadingTree = false;
              setTimeout(() => {
                this.$refs.RelationTree.setCurrentKey(res[0].children[0].id);
              }, 200);
              this.$refs.g6.entryRelation(res[0].children[0]);
            },
          });
        } else {
          this.left_status = false;
          this.$refs.changeWindow.shrinkWindow()
        }
      },
      //点击关系树节点
      handleNodeClick(data) {
        this.$refs.g6.entryRelation(data);
      },
      //查询结果
      firingResult(nodes, edges) {
        // console.log(nodes, edges);
        this.isloading = true;
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/example/g6_dataformat/subnet/_search",
          method: "post",
          data: {
            nodes: nodes,
            relationships: edges
          },
          succeed: (res) => {
            // console.log(res);
            this.isloading = false;
            if (res.code == 200) {
              if (res.data.length > 0) {
                this.left_status = true;
                this.longData = res.data;
              } else {
                this.$message.error("查询无数据");
              }
            }
          },
        });
      },
    },
    mounted() {
      this.initLabels();
    },
  };
</script>
<style lang="less" scoped>
  .neo4jd3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .height-100{
    width: 100%;
    height: 100%;
  }
  .el-main {
    position: relative;
    overflow: hidden;
  }

  .relative_block {
    box-shadow: 0px 0px 5px #000;
    border-radius: 10px;
  }

  .custom-tree-node {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .tree_row {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;

    .tree_row_name {
      display: inline-block;
      width: 100%;
      text-align: left;
      overflow-x: auto;
      font-size: 14px;
    }
  }
</style>